<template>
  <div ref="element" oncontextmenu="return false" style="width: 475px; height: 308px" class="ml-10 mb-10"></div>
</template>
<script setup lang="ts">
import { RenderingEngine, Enums } from "@cornerstonejs/core";
import type { Types } from "@cornerstonejs/core";
import cornerstoneDICOMImageLoader from "@cornerstonejs/dicom-image-loader";
import * as cornerstoneTools from "@cornerstonejs/tools";
const { PanTool, WindowLevelTool, StackScrollMouseWheelTool, ZoomTool, ToolGroupManager, Enums: csToolsEnums } = cornerstoneTools;
const { ViewportType } = Enums;
const { MouseBindings } = csToolsEnums;
import { initDemo } from "./helpers";
import { convertMultiframeImageIds, prefetchMetadataInformation } from "./helpers/convertMultiframeImageIds";
import { onMounted, ref, watch } from "vue";
const props = defineProps({
  file: File
});
const element = ref();
let viewport: any = null;
const run = async () => {
  await initDemo();
  const renderingEngineId = "myRenderingEngine";
  const renderingEngine = new RenderingEngine(renderingEngineId);

  // Create a stack viewport
  const viewportId = "CT_STACK";
  const viewportInput: Types.PublicViewportInput = {
    viewportId,
    type: ViewportType.STACK,
    element: element.value,
    defaultOptions: {
      background: [0, 0, 0]
    }
  };

  renderingEngine.enableElement(viewportInput);
  viewport = renderingEngine.getViewport(viewportId);
  const imageId = cornerstoneDICOMImageLoader.wadouri.fileManager.add(props.file);
  loadAndViewImage(imageId);
  try {
    cornerstoneTools.addTool(PanTool);
    cornerstoneTools.addTool(WindowLevelTool);
    cornerstoneTools.addTool(StackScrollMouseWheelTool);
    cornerstoneTools.addTool(ZoomTool);
    const toolGroupId = "myToolGroup";
    const toolGroup = ToolGroupManager.createToolGroup(toolGroupId);
    toolGroup?.addTool(WindowLevelTool.toolName);
    toolGroup?.addTool(PanTool.toolName);
    toolGroup?.addTool(ZoomTool.toolName);
    toolGroup?.addTool(StackScrollMouseWheelTool.toolName);
    toolGroup?.setToolActive(WindowLevelTool.toolName, {
      bindings: [
        {
          mouseButton: MouseBindings.Primary // Left Click
        }
      ]
    });
    toolGroup?.setToolActive(PanTool.toolName, {
      bindings: [
        {
          mouseButton: MouseBindings.Auxiliary // Middle Click
        }
      ]
    });
    toolGroup?.setToolActive(ZoomTool.toolName, {
      bindings: [
        {
          mouseButton: MouseBindings.Secondary // Right Click
        }
      ]
    });
    toolGroup?.setToolActive(StackScrollMouseWheelTool.toolName);
    toolGroup?.addViewport(viewportId, renderingEngineId);
  } catch (error) {
    console.log("error:", error);
  }
};
const loadAndViewImage = async (imageId: any) => {
  await prefetchMetadataInformation([imageId]);
  const stack = convertMultiframeImageIds([imageId]);

  viewport?.setStack(stack).then(() => {
    // viewport.setProperties({ voiRange: ctVoiRange });
    // Render the image
    viewport?.render();
    // const imageData = this.viewport.getImageData()
    // const { pixelRepresentation, bitsAllocated, bitsStored, highBit, photometricInterpretation } = metaData.get('imagePixelModule', imageId)
    // const voiLutModule = metaData.get('voiLutModule', imageId)
    // const sopCommonModule = metaData.get('sopCommonModule', imageId)
    // const transferSyntax = metaData.get('transferSyntax', imageId)
  });
};
onMounted(() => {
  run();
});
watch(() => props.file, run);
</script>
